<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>紧急服务</span>
      </div>
    </template>

    <div class="emergency-options">
      <el-button
          type="danger"
          size="large"
          class="emergency-btn"
          @click="makeEmergencyCall"
      >
        <el-icon><PhoneFilled /></el-icon>
        <span>紧急呼叫</span>
      </el-button>

      <el-button
          type="warning"
          size="large"
          class="emergency-btn"
          @click="requestHelp"
      >
        <el-icon><WarningFilled /></el-icon>
        <span>求助服务</span>
      </el-button>

      <el-button
          type="success"
          size="large"
          class="emergency-btn"
          @click="contactDoctor"
      >
        <el-icon><FirstAidKit /></el-icon>
        <span>联系医生</span>
      </el-button>

      <el-button
          type="primary"
          size="large"
          class="emergency-btn"
          @click="callPolice"
      >
        <el-icon><BellFilled /></el-icon>
        <span>报警</span>
      </el-button>
    </div>

    <el-divider content-position="left">紧急联系人</el-divider>

    <el-empty
        v-if="!emergencyContact.name"
        description="请先设置紧急联系人信息"
    />

    <el-descriptions v-else border>
      <el-descriptions-item label="姓名">{{ emergencyContact.name }}</el-descriptions-item>
      <el-descriptions-item label="关系">{{ emergencyContact.relation }}</el-descriptions-item>
      <el-descriptions-item label="电话">
        <el-link type="primary" :href="'tel:' + emergencyContact.phone">
          {{ emergencyContact.phone }}
        </el-link>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 紧急呼叫确认对话框 -->
    <el-dialog v-model="showEmergencyConfirm" title="紧急呼叫确认" width="90%">
      <p>您确定要拨打紧急电话吗？</p>
      <div class="emergency-number" v-if="emergencyNumber">
        即将拨打: <strong>{{ emergencyNumber }}</strong>
      </div>
      <template #footer>
        <el-button @click="showEmergencyConfirm = false">取消</el-button>
        <el-button type="danger" @click="confirmEmergencyCall">确认拨打</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import {
  PhoneFilled, WarningFilled, FirstAidKit, BellFilled
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const emergencyContact = ref({
  name: '张三',
  relation: '儿子',
  phone: '13800138000'
})

const showEmergencyConfirm = ref(false)
const emergencyNumber = ref('')

const makeEmergencyCall = () => {
  if (emergencyContact.value.phone) {
    emergencyNumber.value = emergencyContact.value.phone
    showEmergencyConfirm.value = true
  } else {
    ElMessage.warning('请先设置紧急联系人信息')
  }
}

const confirmEmergencyCall = () => {
  showEmergencyConfirm.value = false
  ElMessage.success(`正在呼叫: ${emergencyNumber.value}`)
  // 实际应用中这里应该调用电话API
}

const requestHelp = () => {
  emergencyNumber.value = '12349' // 社区服务热线
  showEmergencyConfirm.value = true
}

const contactDoctor = () => {
  emergencyNumber.value = '120' // 急救电话
  showEmergencyConfirm.value = true
}

const callPolice = () => {
  emergencyNumber.value = '110' // 报警电话
  showEmergencyConfirm.value = true
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.emergency-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.emergency-btn {
  display: flex;
  flex-direction: column;
  height: 80px;
  font-size: 1.1rem;
}

.emergency-btn .el-icon {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.emergency-number {
  margin: 15px 0;
  padding: 10px;
  background-color: #fff8e1;
  border-radius: 6px;
  color: #ff6f00;
  text-align: center;
}

@media (max-width: 768px) {
  .emergency-options {
    grid-template-columns: 1fr;
  }
}
</style>